<template>
  <!-- 监控 任务 监控分组 关联商品 -->
  <el-dialog
    title="新增商品"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    fullscreen
    width="1300px"
  >
    <div>
      <el-button type="primary" plain @click="close">返回</el-button>
    </div>
    <div class="task_goods_add_box" v-loading="loading">
      <div class="tip">
        提示：本工具只能监控QQ号码的掉绑，请不要选择微信账号或者其他账号！
      </div>
      <!-- <div class="tip">收费标准：{{yudou.cost}}虞豆/账号/次</div> -->
      <div class="tip">请勾选需要加入监控的商品</div>
      <div class="content-box flex">
        <div class="left">
          <!-- <h2>待加入的商品</h2> -->
          <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="auto"
          >
            <el-form-item label="游戏名称" prop="gameId">
              <el-select v-model="queryParams.gameId" @change="gameChange">
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in gameList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品编号" prop="goodsId">
              <el-input
                v-model="queryParams.goodsId"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item class="btns">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="
                  queryParams.pageNum = 1;
                  getGoodsList();
                "
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
          <div class="table_box" v-if="dialogVisible">
            <el-table
              ref="table"
              stripe
              :data="goodsTable.rows"
              row-key="id"
              style="width: 100%"
              @selection-change="handleSelection"
            >
              <el-table-column
                label="全选"
                reserve-selection
                type="selection"
                width="55"
              >
              </el-table-column>
              <el-table-column prop="id" label="商品编号"></el-table-column>
              <el-table-column label="商品价格" prop="price" />
              <el-table-column label="游戏账号" prop="accountNumber" />
              <el-table-column label="手机号" prop="securityPhone">
                <template slot-scope="scope">
                  <div>
                    <!-- <span v-if="taskInfo.type == 2">{{
                      scope.row.changeTel
                    }}</span> -->
                    <span>{{
                      scope.row.securityPhone
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商品状态" prop="saleState">
                <template slot-scope="scope">
                  <el-tag
                    :type="
                      statusMap[scope.row.saleState]
                        ? statusMap[scope.row.saleState].type
                        : ''
                    "
                    >{{
                      statusMap[scope.row.saleState]
                        ? statusMap[scope.row.saleState].name
                        : ""
                    }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column label="游戏名称" prop="gameName" />
              <el-table-column
                label="区服"
                show-overflow-tooltip
                prop="systemName"
              >
                <template slot-scope="scope">
                  <span>{{
                    scope.row.systemName ? scope.row.systemName + "/" : ""
                  }}</span>
                  <span>{{
                    scope.row.carrierName ? scope.row.carrierName + "/" : ""
                  }}</span>
                  <span>{{
                    scope.row.groupName ? scope.row.groupName + "/" : ""
                  }}</span>
                  <span>{{ scope.row.serverName }}</span>
                </template>
              </el-table-column>

              <!-- <el-table-column label="自编号" width="100" prop="thirdId" /> -->

              <!-- <el-table-column label="商品标题" min-width="300" prop="title">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="top-start">
                    <div class="zdy-des">{{ scope.row.title }}</div>
                  </el-tooltip>
                </template>
              </el-table-column> -->
            </el-table>
            <pagination
              v-show="goodsTable.total > 0"
              :total="goodsTable.total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getGoodsList"
            />
          </div>
        </div>
        <div class="right">
          <!-- 已选择的商品 -->
          <h2>本次选择的商品（{{ selects.length }}）</h2>
          <div class="table_box">
            <el-table height="516px" stripe :data="selects" style="width: 100%">
              <el-table-column prop="id" label="商品编号"></el-table-column>
              <el-table-column label="商品价格" prop="price" />
              <el-table-column label="游戏账号" prop="accountNumber" />
              <el-table-column label="手机号" prop="securityPhone" width="120">
                <template slot-scope="scope">
                  <div>
                    <!-- <span v-if="taskInfo.type == 2">{{
                      scope.row.changeTel
                    }}</span> -->
                    <span>{{
                      scope.row.securityPhone
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商品状态" prop="saleState">
                <template slot-scope="scope">
                  <el-tag
                    :type="
                      statusMap[scope.row.saleState]
                        ? statusMap[scope.row.saleState].type
                        : ''
                    "
                    >{{
                      statusMap[scope.row.saleState]
                        ? statusMap[scope.row.saleState].name
                        : ""
                    }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column label="游戏名称" prop="gameName" />
              <el-table-column
                label="区服"
                show-overflow-tooltip
                prop="systemName"
              >
                <template slot-scope="scope">
                  <span>{{
                    scope.row.systemName ? scope.row.systemName + "/" : ""
                  }}</span>
                  <span>{{
                    scope.row.carrierName ? scope.row.carrierName + "/" : ""
                  }}</span>
                  <span>{{
                    scope.row.groupName ? scope.row.groupName + "/" : ""
                  }}</span>
                  <span>{{ scope.row.serverName }}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="del" @click="remove(scope.row)"
                    >移除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="center">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" @click="submitForm('form')" v-loading="loading"
        >提交</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import checkPhoneApi from "@/api/gameConfig/checkPhonePx";
import gameListApi from "@/api/gameConfig/gameList"
import goodsListApi from "@/api/gameConfig/goodsList";
import gameDictionaryApi from "@/api/gameConfig/gameDictionary";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      statusMap: {
        0: {
          name: "待审核",
          type: "warning",
        },
        1: {
          name: "在售商品",
          type: "success",
        },
        2: {
          name: "交易中",
          type: "warning",
        },
        3: {
          name: "已售商品",
          type: "",
        },
        4: {
          name: "下架商品",
          type: "danger",
        },
        5: {
          name: "问题商品",
          type: "danger",
        },
        6: {
          name: "损耗商品",
          type: "danger",
        },
        88: {
          name: "回收中",
          type: "warning",
        },
      },
      taskTypeOptions:
      {
        1: {
          label: "掉绑监控",
          value: 1,
          type: 'success'
        },
        2: {
          label: "转手监控",
          value: 2,
          type: 'danger'
        }
      },
      goodsTable: {
        rows: [],
        total: 0
      },
      selects: [],
      pageSelects: [],
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        saleState: 1,
        gameId: '',
        goodsId: ''
      },
      rules: {
        name: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        intervalDays: [{ required: true, message: "请输入", trigger: "change" }],

      },
      taskInfo: {},
      gameList: [],
      carrierId: '',
      yudou: {
        cost: 1
      }
    };
  },
  created() { },
  methods: {
    // 打开弹窗
    open(taskInfo) {
      this.getYudou()
      this.queryParams = {
        pageSize: 10,
        pageNum: 1,
        saleState: 1,
        gameId: '',
        goodsId: ''
      }
      this.taskInfo = taskInfo
      this.selects = []
      this.dialogVisible = true;
      this.getGameList()
    },
    // 获取可加入的游戏类型
    getGameList() {
      gameListApi.getGameList({ carrierType: 1 }).then(async res => {
        this.gameList = res.rows
        this.queryParams.gameId = this.gameList[0].id
        await this.getYysList()
        this.getGoodsList()
      })
    },
    // 选择游戏改变
    async gameChange(e) {
      await this.getYysList()
    },
    //获取每次监控需要的虞豆 

    getYudou() {
      this.getDicts('monitorConfig').then(res => {
        if (res.data && res.data.length) {
          res.data.forEach(r => {
            this.yudou[r.dictLabel] = Math.abs(r.dictValue)
          })
        }
        // this.yudou
        // console.log("%c Line:279 🍺 this.yudou", "color:#ffdd4d", this.yudou);
      })
    },
    // 获取运营商列表
    async getYysList() {
      try {
        const res = await gameDictionaryApi.getChildList({
          gameId: this.queryParams.gameId,
          systemKey: 'carrier'
        })
        if (res.rows && res.rows.length) {
          res.rows.forEach(r => {
            if (r.fieldName == 'QQ') {
              this.carrierId = r.id

            }
          });
        } else {
          this.carrierId = ''
        }
      } catch (error) {
        this.carrierId = ''
      }
    },
    // 获取未监控的商品列表
    getGoodsList() {
      this.loading = true
      if (this.taskInfo.type == 1) {
        this.queryParams.saleState = 1
      } else if (this.taskInfo.type == 2) {
        this.queryParams.saleState = 3
      }
      this.queryParams.monitoringState = 3
      this.queryParams.carrierId = this.carrierId
      goodsListApi.myAccount(this.queryParams)
        .then(response => {
          this.loading = false;
          this.goodsTable = response
        })
        .catch(err => {
          this.loading = false;
        });
    },

    // 表格选择项改变
    handleSelection(arr) {
      let reg = new RegExp(/^[1-9][0-9]{4,10}$/)
      let reg2 = new RegExp(/^(1[0-9][0-9])\d{8}$/)
      this.selects = arr
      if (arr && arr.length) {
        arr.forEach(r => {
          if (reg.test(r.accountNumber)) {
          } else {
            // 取消选中
            this.$refs.table.toggleRowSelection(r, false)
            this.$alert(`包含账号不是QQ号码的商品，无法添加！`)
          }
          if (reg2.test(r.securityPhone)) {
          } else {
            // 取消选中
            this.$refs.table.toggleRowSelection(r, false)
            this.$alert(`没有手机号码的商品，无法添加！`)
          }
        })
      }
    },
    //移除已选择
    remove(row) {
      this.$refs.table.toggleRowSelection(row, false)
    },
    // 重置
    reset() {
      this.form = {
        gameId: "",
        pageNum: 1,
        pageSize: 10,
      }
      this.$refs.form.resetFields();
    },

    submitForm(formName) {
      if (this.selects.length == 0) {
        return this.$message.error('请选择商品！')
      }
      this.$confirm("确认将已选择的商品添加到监控任务中吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true
          // 保存商品 monitorTaskId:监控id
          // goodsIds: 逗号分割的商品ids
          let goodsIds = []
          for (let i = 0; i < this.selects.length; i++) {
            const selectItem = this.selects[i]
            goodsIds.push(selectItem.id)
          }
          checkPhoneApi.taskAddGoods({
            goodsIds: goodsIds.join(','), monitorTaskId: this.taskInfo.id
          }).then(res => {
            this.loading = false
            this.$message.success(res.msg);
            this.dialogVisible = false;
            this.$parent.getList();
          }).catch(err => {
            this.loading = false
          })
        })
        .catch(() => { });




    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.tip {
  color: red;
}
.task_goods_add_box {
  width: 100%;
  .content-box {
    width: 100%;
    flex-wrap: nowrap;
    margin-top: 10px;
    min-height: 600px;
    > div {
      width: 50%;
    }
    .left {
      margin-right: 10px;
    }
  }
}
::v-deep .el-dialog__body {
  max-height: calc(100vh - 120px) !important;
}
</style>
